<template>
	<view class="situation">
		<view class="tab">
			<view class="left" :style="active == 0 ? 'border-bottom: 8rpx solid #006DFF; padding: 20rpx 0 20rpx 0;' : ' padding: 20rpx 0 28rpx 0;'" @click="handleTab(0)">
				未签到（{{not}}）
			</view>
			<view class="right" :style="active == 1 ? 'border-bottom: 8rpx solid #006DFF; padding: 20rpx 0 20rpx 0;' : ' padding: 20rpx 0 28rpx 0;'" @click="handleTab(1)">
				已签到（{{ int }}）
			</view>
		</view>
		<view class="card" v-for="(item, index) in list" :key="index" @click.stop="handleSituationDetail($event, item)">
			<view class="card_top">
				<view class="left">
					<img class="card_img" src="/static/time.png" alt="" />
					<view class="card_title">
						签到日期：{{ item.time }}
					</view>
				</view>
				<view class="right" v-if="active == 0" style="color: #CB000E;">
					未签到
				</view>
				<view class="right" v-if="active == 1" style="color: #00832B;">
					已签到
				</view>
			</view>
			<view class="card_content" :style="active == 0 ? 'border-bottom: 1px solid #ccc;' : ''">
				<view class="pd">
					学生姓名：{{ item.name }}
				</view>
				<view class="pd">
					学号：{{ item.studentID }}
				</view>
				<view class="pd" v-if="active == 1">
					签到时间：{{ item.time }}
				</view>
				<view class="pd" v-if="active == 1">
					签到地点：{{ item.address }}
				</view>
			</view>
			<view class="card_footer" v-if="active == 0">
				<view class="left">
					<view class="icon">
						{{ item.surname }}
					</view>
					<view class="title">
						审批通过
					</view>
				</view>
				<view class="right" @click.stop="makeCall($event)">
					拨打电话
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				not: 4,
				int: 4,
				active: 0,
				list: [
					{
						time: '2024/1/20',
						name: '张婉悠',
						studentID: '123123',
						signIn: '0',
						status: '1',
						phone: '13270453198',
						surname: '南',
						time: '2024/01/03 00:00:00',
						address: 'A地点'
					},{
						time: '2024/1/20',
						name: '童锦程',
						studentID: '123123',
						signIn: '0',
						status: '1',
						phone: '13270453198',
						surname: '南',
						time: '2024/01/03 00:00:00',
						address: 'A地点'
					},{
						time: '2024/1/20',
						name: '张起灵',
						studentID: '123123',
						signIn: '0',
						status: '1',
						phone: '13270453198',
						surname: '南',
						time: '2024/01/03 00:00:00',
						address: 'A地点'
					},{
						time: '2024/1/20',
						name: '鹿晗',
						studentID: '123123',
						signIn: '0',
						status: '1',
						phone: '13270453198',
						surname: '南',
						time: '2024/01/03 00:00:00',
						address: 'A地点'
					}
				]
			}
		},
		methods: {
			handleTab(index) {
				this.active = index
			},
			handleSituationDetail(event, item) {
				// 阻止冒泡行为
				event.stopPropagation();
				uni.navigateTo({
					url: `/pages/situation_detail/index?detail=${item}&inOut=${this.active}`
				})
			},
			makeCall(event) {
				// 阻止冒泡行为
				event.stopPropagation();
				uni.makePhoneCall({
					phoneNumber: '13270453198' // 这里替换为你要拨打的电话号码
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.situation{
		width: 94%;
		margin: 20rpx auto 0rpx;
		.tab{
			padding: 0rpx 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			border-radius: 8rpx;
		}
		.card{
			padding: 20rpx;
			margin: 20rpx 0;
			border-radius: 10rpx;
			background: #fff;
			.card_top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					display: flex;
					align-items: center;
					font-size: 28rpx;
					padding: 10rpx 0rpx;
					.card_img{
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}
				}
			}
		}
		.card_content{
			font-size: 24rpx;
			padding: 20rpx 0rpx;
			color: #5D5E5D;
			.pd{
				padding: 4rpx 0rpx;
			}
		}
		.card_footer{
			padding-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
			.left{
				display: flex;
				align-items: center;
				color: #686868;
				.icon{
					width: 60rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					margin-right: 16rpx;
					background-color: #FFE9BF;
					border-radius: 50%;
					color: #FFA93F;
				}
				.title{
					color: #00A035;
				}
			}
			.right{
				width: 180rpx;
				height: 60rpx;
				color: #fff;
				text-align: center;
				line-height: 60rpx;
				border-radius: 10rpx;
				background-image: linear-gradient(to right, #40DD71, #00B773);
			}
		}
	}
</style>